<template>
  <div>
    <a-card>
      <a-space>
        <a-input
          v-model:value="listQuery.name"
          placeholder="输入条件搜索"
          allow-clear
          @keyup.enter="handleFilter"
        />
        <a-button type="primary" :icon="h(SearchOutlined)" @click="handleFilter">搜索</a-button>
      </a-space>
    </a-card>
    <a-card class="mt-2">
      <a-table
        bordered
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        :loading="tableLoading"
        :row-key="(row) => row.id + ''"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'actions'">
            <a-button size="small" type="link" @click="handleEdit(record)">编辑</a-button>
          </template>
        </template>
      </a-table>
    </a-card>
    <a-modal v-model:open="showModal" :mask-closable="false" :title="form.name">
      <a-form
        ref="formRef"
        :model="form"
        :rules="rules"
        :label-col="{ span: 4 }"
        style="padding-top: 20px"
      >
        <a-form-item label="字典值" name="value">
          <a-time-range-picker
            v-if="form.id === 2"
            v-model:value="timeRange"
            :minute-step="30"
            :allow-clear="false"
            format="HH:mm"
            value-format="HH:mm"
          />
          <a-input v-else v-model:value="form.value" allow-clear placeholder="请输入字典值" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button type="primary" :loading="formBtnLoading" @click="handleConfirm">提交</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { h, onMounted, reactive, ref, watch } from 'vue';
  import DictApi from '@/api/DictApi';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import { Rule } from 'ant-design-vue/es/form';

  let columns = [
    { title: '字典名', dataIndex: 'name' },
    { title: '字典值', dataIndex: 'value' },
    { title: '创建时间', dataIndex: 'createTime' },
    { title: '更新时间', dataIndex: 'updateTime' },
    {
      title: '操作',
      dataIndex: 'actions',
      align: 'center',
    },
  ];
  let data = ref([]);
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0,
    onChange: (current: number) => {
      pagination.current = current;
      getList();
    },
  });
  onMounted(() => {
    getList();
  });

  const listQuery = reactive<any>({});

  const tableLoading = ref(false);

  function getList() {
    tableLoading.value = true;
    DictApi.page({ index: pagination.current, size: pagination.pageSize, ...listQuery })
      .then((res) => {
        data.value = res.data;
        pagination.total = res.total;
      })
      .finally(() => (tableLoading.value = false));
  }

  function handleFilter() {
    pagination.current = 1;
    getList();
  }

  const showModal = ref(false);
  const formRef = ref();
  let form = reactive<any>({});
  const rules: Record<string, Rule[]> = {
    value: [{ required: true, trigger: 'blur', message: '请输入字典值' }],
  };

  const timeRange = ref();
  watch(timeRange, () => {
    timeRange.value && (form.value = timeRange.value.join(';'));
  });

  function handleEdit(row) {
    showModal.value = true;
    Object.assign(form, row);
    formRef.value?.clearValidate();
    if (row.id === 2) {
      timeRange.value = row.value.split(';');
    }
  }

  const formBtnLoading = ref(false);

  function handleConfirm() {
    formRef.value
      .validate()
      .then(() => {
        formBtnLoading.value = true;
        DictApi.update(form)
          .then(() => {
            message.success('提交成功');
            showModal.value = false;
            getList();
          })
          .finally(() => {
            formBtnLoading.value = false;
          });
      })
      .catch(() => {
      });
  }
</script>

<style scoped></style>
